import React, { useState } from 'react'
import { NavBar, Button, Address, Cell, Switch, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { Input } from 'antd-mobile'
import { TextArea } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import { Area, Field } from 'react-vant'
import { areaList } from '@vant/area-data'
export default function Addressadd() {
    let navigate = useNavigate()
    let [name, setName] = useState("")
    let [phone, setPhone] = useState("")
    let [textarea, setTextarea] = useState("")
    const [value, setValue] = useState("")
    let [text, setText] = useState("")
    let add = async () => {
        let obj = {
            name: name,
            phone: phone,
            region: text,
            addr: textarea
        }
        console.log(obj);
        await axios.post("http://123.57.180.216:3000/add", obj)
        navigate("/address")

    }

    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => navigate("/settings")}
            >
                新建地址信息
            </NavBar>
            <span style={{ marginLeft: "20px" }}>收货人<Input value={name} onChange={(e) => setName(e)} placeholder='请输入姓名' style={{ marginLeft: "20px" }} /></span>
            <br></br>
            <span style={{ marginLeft: "20px" }}>联系电话<Input value={phone} onChange={(e) => setPhone(e)} placeholder='请输入手机号码' style={{ marginLeft: "20px" }} /></span>
            <Area
                popup={{
                    round: true,
                }}
                title='标题'
                value={value}
                areaList={areaList}
                onConfirm={(values, options) => {
                    setValue(values)
                    setText(options.map(option => option.text).join(' '))
                }}
            >
                {(_, selectRows, actions) => {
                    return (
                        <Field
                            label='选择地区'
                            value={selectRows.map(row => row?.text).join('')}
                            onClick={() => actions.open()}
                        />
                    )
                }}
            </Area>
            <span style={{ marginLeft: "20px" }}>详细地址<TextArea placeholder='请输入内容' value={textarea} onChange={(e) => setTextarea(e)} clearable style={{ marginLeft: "20px", height: "150px" }} /></span>



            <div style={{ position: "fixed", top: "690px", width: "96%", height: "50px", marginLeft: "1%" }}>
                <Button type="primary" block onClick={add}>保存地址</Button>
            </div>
        </div >
    )
}
